<template>
  <div>
    <van-nav-bar title="兑换卡会员" left-text="返回" left-arrow @click-left="$router.go(-1)" />
    <p>卡片来源</p>
    <van-field v-model="fieldValue" is-link readonly label="" placeholder="请选择来源" @click="show = true" />
    <van-popup v-model="show" round position="bottom">
      <van-picker title="选择来源" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel" @change="onChange" />
    </van-popup>
    <p>兑换码</p>
    <p>
      <van-cell-group>
        <van-field v-model="dhmvalue" label="" placeholder="请输入兑换码" />
      </van-cell-group>
    </p>
  </div>
</template>

<script>
import { ref } from 'vue'
import { Toast } from 'vant'
export default {
  data() {
    return {
      dhmvalue: '',
      mdvalue: '',
      show: false,
      fieldValue: '',
      columns: ['大众点评', '美团', '支付宝口碑'],
      cascaderValue: ''
    }
  },
  methods: {
    onConfirm(value, index) {
      this.show = false
      Toast(`当前值：${value}, 当前索引：${index}`)
      this.fieldValue = value
    },
    onChange(picker, value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`)
    },
    onCancel() {
      Toast('取消')
      this.show = false
    },
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false
      this.fieldValue = selectedOptions.map(option => option.text).join('/')
    }
  }
}
</script>

<style scoped>
p {
  font-size: 20px !important;
  margin: 5px;
}
</style>
